<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>登录</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			height: 100%;
		}

		.c-page {
			/* max-width: 375px; */
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100%;
			position: relative;
		}
		.message-box {
			display: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		.message {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 50vw;
			padding: 30px 10px;
			background-color: rgba(0,0,0,0.75);
			border-radius: 10px;
			color: #fff;
		}
		.c-head {
			margin-top: 40%;
			text-align: center;
		}

		.c-img {
			width: 30vw;
			height: 30vw;
		}

		.c-img img {
			max-width: 100%;
			max-height: 100%;
			width: 100%;
		}

		.c-main {
			background-color: #fff;
			border-radius: 5px;
		}

		.c-content {}

		.c-inputBox {
			display: flex;
			align-items: center;
			width: 65vw;
			padding: 10px;
			border-radius: 90px;
			border: 1px solid #ebedf0;
			margin-bottom: 15px;
		}

		.c-inputBox:last-child {
			margin-bottom: none;
		}
		.c-inputBox img {
			width: 22px;
			height: 22px;
		}

		.c-inputBox input {
			flex: 1;
			height: 24px;
			margin: 0 10px;
			border: none;
			line-height: 1;
		}
		.c-action {
			margin-top: 30px;
		}
		.c-action input {
			width: 100%;
			height: 44px;
			background-color: #777bfe;
			border-radius: 90px;
			border: none;
			color: #fff;
			line-height: 1.2;
			text-align: center;
		}
		input:focus {
			border: none;
			outline: none;
			border: none;
		}
	</style>
	<body>
		<div class="c-page">
			<div class="c-head">
				<div class="c-img">
					<img src="" alt="">
				</div>
				<h3 style="margin: 30px 0;">登 录</h3>
			</div>
			<div class="c-main">
				<div class="c-content">
					<form>
						<div class="c-inputBox">
							<img alt="" src="">
							<input name="" id="sNameOrNo" value="" placeholder="用户名" required />
							<!-- <span>请输入用户名</span> -->
						</div>
						<div class="c-inputBox">
							<img alt="" src="">
							<input type="password" name="" id="sPass" value="" placeholder="密码" required />
							<!-- <span>请输入密码</span> -->
						</div>
						<div class="c-action">
							<input type="button" value="登录" onclick="submitLogin()" />
						</div>
					</form>

				</div>
			</div>
			
			<div class="message-box">
				<div class="message">
					<span>提示：登录成功！</span>
				</div>
			</div>
			
		</div>

		<script type="text/javascript">
			let isRequest = false;  // 是否处于请求中；true=请求中
			//提交登录
			function submitLogin() {
				let sNameOrNo = document.querySelector('#sNameOrNo').value;
				let sPass = document.querySelector('#sPass').value;
				let sOpenId = GetQueryString('openid');
				if(!sNameOrNo) {
					showMessage('请输入用户名');
					return;
				}
				if(!sPass) {
					showMessage('请输入密码');
					return;
				}
				if(!isRequest) {
					isRequest = true;
					try {
						ajax({
							method: 'POST',
							url: `/wechat/login/in?sNameOrNo=${sNameOrNo}&sPass=${sPass}&sOpenId=${sOpenId}`,
							success: function(res) {
								//在这里对获取的数据经常操作
								if(res.success) {
									//关闭浏览器
									showMessage(res.msg);
									let time = setTimeout(()=> {
										closeWeXinWindow(); 
										clearTimeout(time);
									}, 1500);
								} else {
									showMessage(res.msg);
								}
							}
						})
					} catch(err) {
						console.log(err);
						isRequest = false;
					}
				}
			}
			// 显示提示信息
			function showMessage(msg) {
				let $message = document.querySelector(".message-box");
				let $span = document.querySelector(".message span");
				$span.innerText = msg;
				$message.style.display = "block";
				let time = setTimeout(()=> {
					$message.style.display = "none";
					clearTimeout(time);
					isRequest = false;
				}, 1500);
			}
			// 获取url参数
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
				if (r != null) return unescape(r[2]);
				return null;
			}
			/* 封装ajax函数
			 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
			 * @param {string}opt.url 发送请求的url
			 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
			 * @param {object}opt.data 发送的参数，格式为对象类型
			 * @param {function}opt.success ajax发送并接收成功调用的回调函数
			 */
			function ajax(opt) {
				opt = opt || {};
				opt.method = opt.method.toUpperCase() || 'POST';
				opt.url = opt.url || '';
				opt.async = opt.async || true;
				opt.data = opt.data || null;
				opt.success = opt.success || function() {};
				var xmlHttp = null;
				if (XMLHttpRequest) {
					xmlHttp = new XMLHttpRequest();
				} else {
					xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
				}
				var params = [];
				for (var key in opt.data) {
					params.push(key + '=' + opt.data[key]);
				}
				var postData = params.join('&');
				if (opt.method.toUpperCase() === 'POST') {
					xmlHttp.open(opt.method, opt.url, opt.async);
					xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
					xmlHttp.send(postData);
				} else if (opt.method.toUpperCase() === 'GET') {
					xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
					xmlHttp.send(null);
				}
				xmlHttp.onreadystatechange = function() {
					if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
						opt.success(JSON.parse(xmlHttp.responseText)); //如果不是json数据可以去掉json转换
					}
				};
			}
			
			// 关闭微信浏览器
			function closeWeXinWindow() {
			    if(typeof(WeixinJSBridge)!="undefined") {
			        WeixinJSBridge.call('closeWindow');
			    } else {
			        if (navigator.userAgent.indexOf("MSIE") > 0) { 
			        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { 
			            window.opener = null; window.close(); 
			        } else { 
			            window.open('', '_top'); window.top.close(); 
			        } 
			        } else if (navigator.userAgent.indexOf("Firefox") > 0) { 
						window.location.href = 'about:blank '; 
			        } else { 
			            window.opener = null;  
			            window.open('', '_self', ''); 
			            window.close(); 
			        }
			    }
			}
		</script>
	</body>
</html>
